<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            border: 1px solid black;
            display: block;
            margin: 100px auto;
        }
    </style>
</head>

<body>
    <!-- 
        1:canvas是HTML5中新增双标签
        2:canvas标签默认w|h->300 * 150
        3:浏览器认为canvas标签实质图片
        4:canvas标签嵌套文字内容、嵌套子节点没有任何意义

        canvas注意事项:
        1:canvas标签宽度与高度不能通过样式设置，只能通过width属性与高度属性设置
        2:画布的任何操作通过ctx上下文操作
       -->
    <canvas class="box" width="600" height="400"></canvas>
</body>

</html>
<script>
    //canvas标签主要作用是:利用js在画布(canvas)当中绘制简单图形
    //绘制矩形
    //获取DOM----白纸
    let canvas = document.querySelector('.box');
    //获取画布上下文----画质图形'笔'
    //画布任何的操作都是需要通过'笔'进行操作
    let ctx = canvas.getContext('2d');
    //设置矩形填充的颜色:英文字母、16进制数字、rgb
    ctx.fillStyle = "yellowgreen"
    //绘制填充颜色矩形
    //绘制矩形 x|y|w|h
    ctx.fillRect(50,100,50,300);
    ctx.fillRect(150,200,50,200)
    ctx.fillRect(250,80,50,320);
    ctx.fillRect(350,280,50,120);

    //绘制文字
    ctx.fillStyle = "red";//填充文字颜色
    ctx.font="18px 微软雅黑";//字体大小与字体的设置
    ctx.fillText("数据可视化",100,50);//绘制文字


</script>